<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>后台管理系统</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/element-ui.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
    .el-date-picker__time-header{display: none;}
    </style>
</head>
<body>
<div id="optimizeClueManagement" class="optimizeClueManagement mainPadding" style="display: none;">
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>充值管理</el-breadcrumb-item>
        <el-breadcrumb-item>商家消费记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">        
    <shiro:hasPermission name="merchant:consumeRecord:setting">
        <el-button v-if="btnShow" type="primary" @click="openRemindDig">设置余额不足提醒</el-button>
        <el-button v-else type="primary" @click="openRemindDig">编辑余额不足提醒</el-button>
    </shiro:hasPermission>
    <shiro:hasPermission name="merchant:consumeRecord:export">
        <el-button type="warning" @click="exportFun">导出消费记录</el-button>
    </shiro:hasPermission>
    <shiro:hasPermission name="merchant:consumeRecord:view">
        <el-button type="success" @click="gotoInfo()">商家消费明细</el-button>
    </shiro:hasPermission>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm" :model="form" ref="form"> 
                <el-form-item label="消费商家:" label-width="auto">
                    <el-select v-model="form.mainAccountId" filterable  clearable placeholder="商家账户名">
                        <el-option
                            v-for="item in merchantUserListOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> 

                <el-form-item label="项目信息:">
                    <el-select clearable v-model="form.projectId" placeholder="请选择" filterable>
                        <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="消费日期:">
                    <el-date-picker
                        format="yyyy-MM-dd"  
                        value-format="yyyy-MM-dd"
                        v-model="form.createDateStart"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker
                        format="yyyy-MM-dd"  
                        value-format="yyyy-MM-dd"
                        v-model="form.createDateEnd"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>                
                <el-form-item label="">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable('form')"  class="searchBtn" style="margin-left: 10px;">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row class="greyTip">
            <span style="margin-right: 10px;">今日消费：{{todayNum}}条</span><span style="margin-right: 10px;">共计：{{this.numFormat(todayAmount)}}元</span><span style="margin-right: 10px;">昨日消费：{{yesterdayNum}}条</span><span style="margin-right: 10px;">共计：{{this.numFormat(yesterdayAmount)}}元</span>
        </el-row>
        <el-row>            
            <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                style="width: 100%"
                border
                :data="dataTable"
                @selection-change="handleSelectionChange"
            >
                <el-table-column align="center" type="selection" width="55"></el-table-column>
                <el-table-column align="center" type="index" label="序号"  width="55"></el-table-column>
                
                <el-table-column align="center" prop="userName" label="消费商家名称">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="gotoSingle(scope.row.mainAccountId)">{{scope.row.userName}}</el-button>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="projectName" label="项目信息" width="150">
                    <template slot-scope="scope">
                        <div v-if="scope.row.projectName">
                            <el-popover
                                placement="top-start"
                                trigger="hover"
                                width="200"
                            >
                                {{scope.row.projectName}}
                                <div slot="reference" class="name-wrapper">
                                    {{scope.row.projectName}}
                                </div>
                            </el-popover>
                        </div> 
                        <div v-else>__</div>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="dateNum" label="消费数（天）" width="200"></el-table-column>
                <el-table-column align="center" prop="amount" label="消费金额(元)" width="200"></el-table-column>                
                <el-table-column align="center" prop="createDate" label="最新消费日期"  :formatter="dateFormat" width="200"></el-table-column>
                <el-table-column align="center" prop="clueNum" label="总获取资源数（条）" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="gotoInfo(scope.row)">{{scope.row.clueNum}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <table-pagination :pager="pager" @change="searchTable"></table-pagination>
        </el-row>
    </div>
    <!-- 分配资源 -->
    <el-dialog title="余额不足提醒" :visible.sync="remindFormVisible" width="540px">
        <el-form :model="formRemind" ref="formRemind" :rules="rules">
            <el-form-item label="账户余额低于：" prop="amount" :label-width="formLabelWidth">
                <el-input v-model="formRemind.amount" placeholder="" style="width: 290px;" maxLength="9" @keyup.native="number"></el-input>元
                <span>触发提醒</span>
            </el-form-item>
            <!-- <el-form-item label="提醒标题：" prop="title" :label-width="formLabelWidth">
                <el-input v-model="formRemind.title" placeholder="" style="width: 290px;" maxLength="20"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="提醒人手机号：" prop="phone" :label-width="formLabelWidth">
                <el-input oninput = "value=value.replace(/[^0-9]/g,'')" v-model="formRemind.phone" placeholder="" style="width: 290px;" maxLength="11" ></el-input>
            </el-form-item>
            <el-form-item label="提醒人手机号2：" :label-width="formLabelWidth">
                <el-input oninput = "value=value.replace(/[^0-9]/g,'')" v-model="formRemind.phone2" placeholder="" style="width: 290px;" maxLength="11" ></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="提醒内容：" prop="content" :label-width="formLabelWidth">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="formRemind.content" style="width: 290px;" maxLength="50"></el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
            <el-button type="primary" :disabled="btnDisabled" @click="submitApplyForm('formRemind')">保存</el-button>
            <!-- <el-button @click="remindFormVisible= false">取 消</el-button> -->
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>

<!-- import common js-->
<script th:inline="javascript">
    var merchantUserList=[[${userList}]];//商户集合
    var projectList = [[${ projectList }]];//项目信息

    var ocmVM = new Vue({
        el: '#optimizeClueManagement',
        data: function() {
            return {
                btnShow:true,
                btnDisabled:false,
                remindFormVisible:false,
                pendingReviewNum:'',
                multipleSelection: [],//选择行
                pager:{
                  total: 0,
                  currentPage: 1,
                  pageSize: 20,
                },
                form: {
                  mainAccountId:'',
                  createDateStart:'',
                  createDateEnd:'',
                  projectId: ''
                },
                formLabelWidth: '120px',
                dataTable: [],
                merchantUserListOptions:merchantUserList,
                formRemind:{
                    amount:'',
                    title:'',
                    content:'',
                    // phone:'',
                    // phone2:''
                },
                todayNum:'',
                todayAmount:'',
                yesterdayNum:'',
                yesterdayAmount:'',
                rules:{                    
                    amount: [
                        { required: true, message: '账户余额低于不能为空', trigger: 'blur' },
                        { validator:function(rule,value,callback){
                            // var reg =  /^[0-9]+[0-9]*]*$/ ;
                            var reg =  /^\+?[1-9][0-9]*$/ ;
                            if(value !=null && value !="null" && value !="" && !reg.test(value) ){
                                callback(new Error("请输入正确格式，仅支持正整数"));
                                return;
                            }else{
                                callback();
                            }
                        }, trigger: 'blur'}
                    ],
                    title: [
                        { required: true, message: '提醒标题不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '提醒内容不能为空', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        {
                            validator: function (rule, value, callback) {
                                if (/^[0-9]*$/.test(value) == false) {
                                    callback(new Error("请输入数字"));
                                    return
                                }
                                if (value.length !== 11) {
                                    callback(new Error("请输入11位数字"));
                                    return
                                }
                                callback();
                            }, trigger: 'blur'
                        }
                    ],
                },
                projectList: projectList

            }
        },
        methods: {
            numFormat(num) {
                var c = (num.toString().indexOf ('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                return c;
            },
            number(){
            　　this.formRemind.amount=this.formRemind.amount.replace(/[^\.\d]/g,'');
                this.formRemind.amount=this.formRemind.amount.replace('.','');
            },
            clickRow(row){
                this.$refs.multipleTable.toggleRowSelection(row)
            },
            handleSelectionChange(val) {//选择节点的事件
                // console.log(val)
                this.multipleSelection = val;
            },
            handleStart(index, row) {
                console.log(index, row);
            },
            handleForbid(index, row) {
                console.log(index, row);
            },
            searchTable() {
            	var startTime=this.form.createDateStart;
                var endTime=this.form.createDateEnd;
                if(endTime && startTime>endTime){
                    this.$message({
                        message: '结束时间不允许选择早于开始时间',
                        type: 'warning'
                    });
                    return;
                }
                var param ={};
                param.pageSize = this.pager.pageSize;
                param.pageNum = this.pager.currentPage;   
                param.mainAccountId = this.form.mainAccountId;   
                param.createDateStart = this.form.createDateStart;   
                param.createDateEnd = this.form.createDateEnd; 
                param.projectId = this.form.projectId;
                axios.post('/merchant/consumeRecord/countList', param)
                .then(function (response) {
                    console.log(response)
                    var result =  response.data;
                    if(result.code==0){
                        var table=result.data;
                        ocmVM.dataTable= table.data;
                        ocmVM.pager.total =  table.total;
                        ocmVM.pager.currentPage = table.currentPage;
                    }else{
                        ocmVM.$message.error(result.msg);
                    }                    
                })
                .catch(function (error) {
                     console.log(error);
                });
                
            },
          //日期数据格式化方法
            dateFormat( row, column, cellValue, index) {
              if (cellValue == undefined) {
                 return "";
              }
              return moment(cellValue).format("YYYY-MM-DD");
            },
            openRemindDig(){
                this.remindFormVisible = true;                
            },
            settingRemindDig(){
                var param={};
                axios.post('/merchant/balanceWarnSetting/getBalanceWarnSetting',param)
                .then(function (response) {
                    var data =  response.data;
                    if(data.code=='0'){
                        ocmVM.formRemind.amount=data.data.amount;
                        ocmVM.formRemind.title=data.data.title;
                        ocmVM.formRemind.content=data.data.content;
                        // ocmVM.formRemind.phone=data.data.phone;
                        // ocmVM.formRemind.phone2=data.data.phone2;
                        ocmVM.btnShow=false;
                    }else{
                        ocmVM.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {

                });
            },
            submitApplyForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // if(this.formRemind.phone2&&this.formRemind.phone2.length!=11){
                        //     this.$message.warning(`手机号不能小于11位`);
                        //     return 
                        // }
                        this.btnDisabled = true;
                        //分配
                        var param = {};
                        param.amount = this.formRemind.amount;
                        param.title = this.formRemind.title;
                        param.content = this.formRemind.content;
                        // param.phone = this.formRemind.phone;
                        // param.phone2 = this.formRemind.phone2;

                        axios.post('/merchant/balanceWarnSetting/setting',param)
                        .then(function (response) {
                            var data =  response.data;
                            if(data.code=='0'){
                                ocmVM.$message({message:'设置成功',type:'success',duration:2000,onClose:function(){
                                        ocmVM.remindFormVisible = false;
                                        ocmVM.btnDisabled = false;
                                        ocmVM.searchTable();
                                        ocmVM.settingRemindDig();
                                    }});
                            }else{
                                ocmVM.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                                ocmVM.btnDisabled = false;
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                        .then(function () {

                        });
                    } else {
                        console.log('数据未通过校验！');
                        return false;
                    }
                });
            },
            initList() {
                var param ={};   
                axios.post('/merchant/consumeRecord/countNum', param)
                .then(function (response) {
                    var result =  response.data;
                    if(result.code==0){
                        var table=result.data;
                        ocmVM.todayNum= table.todayNum;
                        ocmVM.todayAmount= table.todayAmount;
                        ocmVM.yesterdayNum= table.yesterdayNum;
                        ocmVM.yesterdayAmount= table.yesterdayAmount;
                        
                    }else{
                        ocmVM.$message.error(result.msg);
                    }                    
                })
                .catch(function (error) {
                     console.log(error);
                });
                
            },
            gotoSingle(id){
                window.location.href='/merchant/consumeRecord/initSingleMerchant?mainAccountId='+id;
            },
            gotoInfo(data){
                if(!data){
                    window.location.href='/merchant/consumeRecord/initInfoList?createDate=&mainAccountId=';
                }else{
                    window.location.href='/merchant/consumeRecord/initInfoList?createDate='+data.createDate+'&mainAccountId='+data.mainAccountId;
                }
            },
            exportFun(){
                var rows = this.multipleSelection;
                if(rows.length <1){
                    this.$message({
                        message: '请选择导出的数据',
                        type: 'warning'
                    });
                    return;
                }
                var param = rows;
                console.log(param)
                axios.post('/merchant/consumeRecord/countListExport',param,{responseType:'blob'})
                .then(function (response) {
                    console.log(response)
                    var data =  response.data;
                    var fileName = response.headers.filename;
                    saveAs(data,decodeURI(fileName));
                })
                .catch(function (error) {
                    console.log(error);
                }).then(function(){
                    ocmVM.loading=false;
                });

            },
        },
        created(){
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            // console.info("create method");
            this.searchTable();
            this.initList();
            this.settingRemindDig();
        },
        mounted(){
            document.getElementById('optimizeClueManagement').style.display = 'block';
        }
  })
</script>
</html>